<template>
  <div id="user_top">
    <div class="center_top">
      <span class="pendant"></span>
      <div class="center_before"></div>
      <div class="profile_info">
        <el-avatar style="width:60px;height:60px;vertical-align: bottom"
                   :src="user.photoUrl"></el-avatar>
        <div class="profile-info-cont">
          <span style="padding-right: 5px;">{{ name }}</span>

          <i v-show="user.sex=='男'" class="el-icon-male" style="background-color:#409EFF;color:white"></i>
          <i v-show="user.sex=='女'" class="el-icon-female" style="background-color:#F56C6C;color:white"></i>
          <div class="introduce"> <span>{{ user.introduce }}</span>
            <el-divider direction="vertical"></el-divider>
            <span><i class="el-icon-mobile-phone">{{ user.tel }}</i></span>
            <el-divider direction="vertical"></el-divider>
            <span><i class="iconfont icon-24gl-mailboxFull"></i>{{ user.email }}</span>
          </div>
        </div>
      </div>
      <div class="operation">
        <el-button type="primary" icon="el-icon-edit" size="small" @click="dialogFormVisible=true">编辑</el-button>
      </div>
    </div>
    <el-dialog title="个人信息" :visible.sync="dialogFormVisible" :top="0+''"  :close-on-click-modal="false" width="40%">
      <el-form :model="form" ref="form" size="small">
        <el-form-item label="昵称" :label-width="formLabelWidth">
          <el-input v-model="form.pickName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="求职意向" :label-width="formLabelWidth">
          <el-select v-model="form.expect" placeholder="请选择">
            <el-option key="1" label="在校找工作" value="在校找工作"></el-option>
            <el-option key="2" label="离职找工作" value="离职找工作"></el-option>
            <el-option key="3" label="不找工作" value="不找工作">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-radio v-model="form.sex" label="男">男</el-radio>
          <el-radio v-model="form.sex" label="女">女</el-radio>
          <el-upload style="display: inline-block;float: right;margin-right:20px;"
              ref="upload"
              class="avatar-uploader"
              action="/api/upload/?ser=user"
              :on-success="OnUpdateSuccess"
              :limit="1"
              accept=".png, .jpg"
              :auto-upload="true">
            <i class="el-icon-upload"> 修改头像</i>
          </el-upload>
        </el-form-item>
        <el-form-item label="年龄" :label-width="formLabelWidth">
          <el-input v-model="form.age" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="毕业院校" :label-width="formLabelWidth">
          <el-input v-model="form.graduate" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="学历" :label-width="formLabelWidth">
          <el-input v-model="form.edu" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="居住地" :label-width="formLabelWidth">
          <el-input v-model="form.liveCity" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="手机号" :label-width="formLabelWidth">
          <el-input v-model="form.tel" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
          <el-input v-model="form.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="QQ" :label-width="formLabelWidth">
          <el-input v-model="form.qq" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="个性签名" :label-width="formLabelWidth">
          <el-input
              type="textarea"
              placeholder="请输入内容"
              v-model="form.introduce"
              maxlength="20"
              show-word-limit
          >
          </el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateUser">修 改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import {getPersonInfo, updatePersonInfo} from "@/network/user";

export default {
  name: "UserTop",
  inject:['reload'],
  data(){
    return {
      user:'',
      userName:'',
      name:'',
      form:{
        pickName:'',
        sex:'男',
        age:'',
        graduate:'',
        edu:'',
        liveCity:'',
        expect:'在校找工作',
        tel:'',
        email:'',
        qq:'',
        introduce:'',
        photoUrl:'',
        userName:'',
      },
      formLabelWidth:'80px',
      dialogFormVisible:false
    }
  },
  mounted() {
    if(localStorage.getItem("common_userName")){
      this.userName =localStorage.getItem("common_userName");
    }
    this.personInfo();
  },
  methods:{
    personInfo(){
      getPersonInfo(this.userName).then(res=>{
        this.user = res.data.data;
        if(this.user.pickName==undefined){
          this.name = this.user.userName;
        }else{
          this.name = this.user.pickName;
        }
      })

    },
    updateUser(){
      this.form.userName = this.userName;
      updatePersonInfo(this.form).then(res=>{
        if(res!=undefined){
          this.$message.success(res.data.data);
          this.dialogFormVisible = false;
          this.reload();
        }
      })
    },
    OnUpdateSuccess(res){
      if(res.data!=undefined){
        this.form.photoUrl=res.data;
      }
    },
  }
}
</script>

<style scoped>
.grid-content {
  min-height: 50px;
  font-size: 14px;
}
/deep/ .el-dialog__body{
  padding-bottom:0;
}
/deep/.el-dialog__footer{
  padding-top: 0;
}
.center_top {
  height: 100px;
  background-color: white;
  position: relative;
  margin-bottom:20px;
  box-shadow: 0 5px 5px 0 #eceaea;

}

.center_before {
  height: 100px;
  width: 10px;
  background-color: #10b4d2;
  display: inline-block;
  float:left;
}

.pendant {
  background: url(../../assets/img/pendant.png) no-repeat;
  background-size: 100%;
  cursor: pointer;
  height: 62px;
  left: -13px;
  position: absolute;
  top: -6px;
  width: 68px
}
.profile_info{
  width:750px;
  padding: 20px 20px 0 75px;
  float:left;
}
.profile-info-cont{
  margin-left: 20px;
  display: inline-block;
  color:#10b4d2;
}
.introduce{
  padding-top:8px;
  margin-top:5px;
  color:#8b8e99;
  font-size:14px;
}
.operation{
  height:100px;
  float:right;
  line-height:100px;
  margin-right: 50px;
}
</style>